<template>
  <div class="navbar">
    <div class="logo">
      <img src="@/assets/bilibili.jpg" alt />
    </div>
    <div>
        <p>
          请输入内容
            <van-icon class="ipt-icon" name="search"/>
        </p>
    </div>
    <div>
        <img src="@/assets/head.jpg" alt="">
        <p>下载APP</p>    
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.navbar {
  height: 12.5vw;
  background-color: #fff;
  display: flex;
}
.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  padding-right: 15px;
}
.logo img {
  height: 100%;
  width: 100%;
}
div:nth-child(2) {
    flex: 1;
    display: flex;
    align-items: center;
}
div:nth-child(2) p{
    font-size: 14px;
    background-color: #f4f4f4;
    padding: 5px 25px;
    width: 60%;
    border-radius: 15px;
    position: relative;
    color: #aaa;
}
.ipt-icon {
  padding:0;
  margin:0;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translate(0,-40%);
  color:#aaa;
}
div:nth-child(3) {
    display: flex;
    justify-content: center;
    align-items: center;
}
div:nth-child(3) img{
    width: 50px;
    height:50px;
}
div:nth-child(3) p {
    padding: 5px 10px;
    margin: 0 8px;
    background-color: #fb7299;
    color: #fff;
    font-size: 13px;
    border-radius: 3px;
}
</style>